<!DOCTYPE html>
<html lang="zh-CN">
  	<head>
	    <meta charset="utf-8">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	    <meta name="viewport" content="width=device-width, initial-scale=1">
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
		
		<link rel="stylesheet" href="/css/bootstrap.min.css" />
		<link rel="stylesheet" href="/css/header.css" />
		<link rel="stylesheet" href="/css/personal.css" />
		<link rel="stylesheet" href="/css/sweetalert.css" />
	</head>
	
	<body>
		
		<%- include header %>
		
		<div id="userHead">
			<div class="container">
				<div class="row">
					<div class="col-xs-5 col-sm-4 col-md-3 col-md-offset-1">
						<img src="<%= loginbean.userPicture %>" class="img-circle img-responsive center-block" alt="Responsive image" id="picture"/>
						<input type="file" name="userPicture" id="userPicture" />
					</div>
				</div>
			</div>
		</div>
		
		
		<div id="userBody">
			<div class="container">
				
				<form class="form-horizontal" id="userInfoForm">
		        	<div class="form-group">
					    <label class="col-sm-4 control-label" for="name"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;昵称：</label>
					    <div class="col-sm-6">
						    <input type="text" name="name" class="form-control" id="name" placeholder="请输入昵称……" value="<%= userInfo.name %>" readonly>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-4 control-label" for="account"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;账号：</label>
					    <div class="col-sm-6">
						    <input type="text" class="form-control" name="account" id="account" placeholder="请输入账号……" value="<%= userInfo.account %>" readonly>
					    </div>
					</div>
					<div class="form-group">
					    <label class="col-sm-4 control-label" for="password"><span class="glyphicon glyphicon-lock" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;密码：</label>
					    <div class="col-sm-6">
						    <input type="password" name="password" class="form-control" id="password" placeholder="请输入密码……" value="<%= userInfo.password %>" readonly> 
						</div>
					</div>
					<div class="form-group" id="rePasswordForm">
					    <label class="col-sm-4 control-label" for="rePassword">再次输入密码：</label>
					    <div class="col-sm-6">
						    <input type="password" class="form-control" id="rePassword" placeholder="请再次输入密码……" value="<%= userInfo.password %>" readonly>
						</div>
					</div>
					<div class="form-group">
					    <label class="col-sm-4 control-label" for="email"><span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>&nbsp;&nbsp;&nbsp;&nbsp;邮箱：</label>
					    <div class="col-sm-6">
						    <input type="email" class="form-control" id="email" placeholder="请输入邮箱……" value="<%= userInfo.email %>" readonly>
						</div>
					</div>
					<div class="form-group submitBtnGroup">
					    <div class="col-sm-offset-8 col-sm-2">
					    	<button type="button" class="btn btn-primary">修改</button>
					    	<button type="submit" class="btn btn-primary">完成</button>
					    </div>
					</div>
				</form>
				
				<div class="row">
					<div class="col-sm-6 col-sm-offset-4">
						<% if(loginbean.state == "禁言") { %>
						<div class="alert alert-warning alert-dismissible" role="alert">
						  <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
						  <strong>您好，</strong> 您的账号已被禁言.
						</div>
						<% } %>
					</div>
				</div>
				
			</div>
		</div>
		
		
		<div id="userFooter">
			<div class="container">
				<div class="row">
					<div class="col-xs-12">
						<ul class="nav nav-tabs" role="tablist">
						    <li role="presentation" class="active"><a href="#collect" aria-controls="collect" role="tab" data-toggle="tab">我的收藏</a></li>
						    <li role="presentation"><a href="#comment" aria-controls="comment" role="tab" data-toggle="tab">我的评论</a></li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-xs-12">
						<!-- Tab panes -->
						<div class="tab-content">
							
						    <div role="tabpanel" class="tab-pane fade in active" id="collect">
						    	<div class="list-group">
						    		<% userCollect.forEach(function(item) { %>
								    <a href="/news?newsId=<%= item.newsId %>" class="list-group-item">
								    	<div class="row">
								    		<div class="col-sm-6">
								    			<span class="glyphicon glyphicon-tags span-info" aria-hidden="true"></span>
								    			<%= item.title %>
								    		</div>
								    		<div class="col-sm-6 text-right">
								    			<span class="span-info">收藏时间： <time><%= item.createTime %></time></span>
										    	<span class="span-info hidden-xs hidden-sm">点击量 <span class="badge"><%= item.click %></span></span>
												<span class="span-info hidden-xs hidden-sm">评论数 <span class="badge"><%= item.comment %></span></span>
								    		</div>
								    	</div>
								    </a>
								    <% }) %>
								</div>
						    </div>
						    
						    <div role="tabpanel" class="tab-pane fade" id="comment">
						    	
						    	<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
						    		<% userComment.forEach(function(item, index) { %>
									<div class="panel panel-info">
									    <div class="panel-heading" role="tab">
										    <h4 class="panel-title">
										    	<div class="row">
										    		<div class="col-sm-8">
										    			<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<%= index %>" aria-expanded="true" aria-controls="tabpanel">
												        	<span class="glyphicon glyphicon-edit span-info" aria-hidden="true"></span><%= item.title %>
												        </a>
										    		</div>
										    		<div class="col-sm-4 text-right">
										    			 <time><span class="glyphicon glyphicon-pushpin span-info" aria-hidden="true"></span><%= item.sendTime %></time>
										    		</div>
										    	</div>
										    </h4>
									    </div>
									    
									    <div id="collapse<%= index %>" class="panel-collapse collapse " role="tabpanel">
									      	<div class="panel-body">
									        	<%= item.content %>
									      	</div>
									      	<p class="text-right"><a href="/news?newsId=<%= item.newsId %>" class="span-info">详细页面</a></p>
									    </div>
									</div>
									<% }) %>
								</div>
								
						    </div>
						    
						</div>
					</div>
				</div>
			</div>
		</div>
		
		
		<script type="text/javascript" src="/js/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript" src="/js/bootstrap.min.js" ></script>
		<script src="/js/personal.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="/js/sweetalert.min.js" ></script>
	</body>
</html>
